<template>
  <div>
    <!-- //!表单区域 -->
    <div class="search">
      <el-form :inline="true" :model="propetyForm" class="demo-form-inline">
        <el-form-item label="企业名称">
          <el-input v-model="propetyForm.enterpriseName" placeholder="请输入企业名称" @close />
        </el-form-item>
        <el-form-item label="缴费时间">
          <el-date-picker
            v-model="propetyForm.date"
            type="daterange"
            range-separator="→"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- //! 添加按钮 -->
    <div class="button-middle">
      <el-button type="primary" @click="openForm">添加账单</el-button>
    </div>
    <!-- //! 表格区域 -->
    <el-table
      ref="multipleTable"
      :data="renderPropetyList"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        type="index"
        width="90"
      />
      <el-table-column
        prop="billNumber"
        label="账单编号"
        width="200"
      />
      <el-table-column
        prop="enterpriseName"
        label="企业名称"
        width="300"
      />
      <el-table-column
        prop="buildingName"
        label="租赁楼宇"
        width="120"
      />
      <el-table-column
        prop="propertyFeePrice"
        label="物业费"
        width="120"
      />
      <el-table-column
        prop="paymentAmount"
        label="账单金额(元)"
      />
      <el-table-column
        prop="startTime"
        label="缴费时间"
        width="180"
      >
        <!-- <template #default="scope">
            {{ poleType(scope.row.poleType) }}
          </template> -->
      </el-table-column>
      <el-table-column label="操作">
        <template #default="res">
          <el-button
            size="mini"
            @click="edidPropety(res)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="delPropety(res)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- //! 分页器 -->
    <div class="block">
      <el-pagination
        :page-sizes="[5, 10, 20, 30]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- //! 添加账单 -->
    <el-dialog
      title="添加账单"
      :visible="dialogVisible"
      width="480px"
      @close="closeForm"
    >
      <!-- 表单接口 -->
      <div class="form-container">
        <el-form
          ref="addFromBuil"
          :model="addFromBuil"
          :rules="addFormRules"
          label-width="80px"
        >
          <el-form-item label="选择租户" prop="enterpriseId">
            <el-select v-model="addFromBuil.enterpriseId" placeholder="请选择租户">
              <el-option
                v-for="item in enterpriseList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="租赁楼宇" prop="buildingId">
            <el-select v-model="addFromBuil.buildingId" placeholder="请选择租户">
              <el-option
                v-for="item in buildingList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="租赁楼宇" prop="buildingId">
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>

          <!--  -->
          <el-form-item label="支付方式" prop="paymentMethod">
            <el-select v-model="addFromBuil.paymentMethod" placeholder="请选择支付方式">
              <el-option
                v-for="item in payList"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form></div>
      <template #footer>
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button
          size="mini"
          type="primary"
          @click="addFormList"
        >确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { getPropetyListAPI,
  getEnterpriseListAPI,
  getBuildingListAPI
} from '@/api/propety'
export default {
  data() {
    return {
      propetyForm: {
        enterpriseName: '',
        date: ''
      },
      renderPropetyList: [], //! 默认数组
      //! 总条数
      total: null,
      //! 分页器数据
      params: {
        enterpriseName: '', //! 企业名称
        pageSize: 5, //! 页面大小
        page: 1, //! 当前页码默认
        start: '', //! 起始时间
        end: ''//! 截止时间
      },
      dialogVisible: false, //! 表单开关
      addFromBuil: {
        enterpriseId: null, //! 企业id
        buildingId: null, //! 楼宇id
        startTime: '', //! 开始
        endTime: '', //! 结束
        paymentAmount: '', //! 付款总额
        paymentMethod: ''//! 付款方式1微信2支付宝3现金
      },

      addFormRules: {

      },
      enterpriseList: [], //! 企业列表（租户）
      buildingList: [], //! 楼宇列表（楼宇）
      //! 付款方式数组
      payList: [
        { id: 1, label: '微信' },
        { id: 2, label: '支付宝' },
        { id: 3, label: '现金' }
      ],
      costDate: [] //!
    }
  },
  mounted() {
    this.getPropety()
  },
  methods: {
    //! 默认渲染
    async getPropety() {
      const res = await getPropetyListAPI(this.params)
      console.log(res.data.rows)
      this.renderPropetyList = res.data.rows
      this.total = res.data.total
    },
    //! 弹框里确认按钮
    addFormList() {
      this.dialogVisible = false
    },
    //! 查询
    onSubmit() {
      this.params.enterpriseName = this.propetyForm.enterpriseName
      this.params.start = this.propetyForm.date[0]
      this.params.end = this.propetyForm.date[1]
      this.getPropety()
    },
    //! 添加按钮
    async openForm() {
      this.dialogVisible = true
      //! 租户
      const Enter = await getEnterpriseListAPI()
      this.enterpriseList = Enter.data
      //! 楼宇
      const Build = await getBuildingListAPI()
      this.buildingList = Build.data
      //! 缴费周期
    },
    //! 编辑
    edidPropety(res) {
      console.log(res)
    },
    //! 删除
    delPropety(res) {
      console.log(res)
    },
    //! 当前页总条数
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getPropety()
    },
    //! 当前页码发生改变
    handleCurrentChange(val) {
      this.params.page = val
      this.getPropety()
    },
    //! 关闭弹框
    closeForm() {
      this.dialogVisible = false
    }

  }
}
</script>
<style lang="scss" scoped>
.search {
  border-bottom: 1px solid rgb(237,237,237,.9);
}
.button-middle {
  margin-top:20px ;
  // .button-son{
  //   margin-right: 20px;
  // }
}
.block{
  float: right;
}
</style>
